<template>
  <div id="TextEditor">
    <div id="TextEditorNav">
      <div ref="toolbarContainer"></div>
    </div>
    <div id="TextEditorMain">
      <div id="TextEditorMainCode">
        <div ref="textContainer"></div>
      </div>
      <!-- <div id="TextEditorMainShow" v-html="articleHtml"></div> -->
    </div>
  </div>
</template>

<script>
  // import { defineComponent, reactive, toRefs } from 'vue'

  import WangEditor from 'wangeditor'
  import { updateFile } from '@/api/upload'
  import { HOST } from '@/config'

  // 设置菜单
  const menus = [
    'head',
    'bold',
    'fontSize',
    'fontName',
    'italic',
    'underline',
    'strikeThrough',
    'indent',
    'lineHeight',
    'foreColor',
    'backColor',
    'link',
    'todo',
    'justify',
    'quote',
    'emoticon',
    'image',
    'splitLine',
  ]
  export default {
    name: 'TextEditor',
    props: {
      content: {
        type: String,
        default: '',
      },
      value: {
        type: String,
        default: '',
      },
      field: {
        type: String,
        default: 'detail',
      },
    },
    emits: ['changeValue'],
    // setup() {
    //   const state = reactive({
    //     articleHtml: '',
    //     editor: null,
    //   })
    //   const onChange = (newHtml) => {
    //     this.articleHtml = newHtml
    //     this.$emit('changeValue', newHtml)
    //   }
    //   const updateImg = (image, insertImgFn) => {
    //     if (image) {
    //       const file = new FormData()
    //       file.append('image', image)
    //       updateFile(file).then((res) => {
    //         if (res.code == 0) {
    //           insertImgFn(res.data[0])
    //         }
    //       })
    //     }
    //   }
    //   return {
    //     ...toRefs(state),
    //     onChange,
    //     updateImg,
    //   }
    // },

    data() {
      return {
        articleHtml: '',
        editor: null,
      }
    },
    mounted() {
      // 设置工具栏和编辑区分开
      this.editor = new WangEditor(
        this.$refs.toolbarContainer,
        this.$refs.textContainer
      )
      // 设置z-index
      const editor = this.editor
      editor.config.zIndex = 1
      // 设置内容变化事件
      editor.config.onchange = (newHtml) => {
        this.onChange(newHtml)
      }
      // 设置placeholder
      editor.config.placeholder = '请输入内容'
      // 图片菜单配置
      editor.config.menus = menus
      // 图片上传配置
      editor.config.showLinkImg = false
      editor.config.showLinkImgAlt = false
      editor.config.showLinkImgHref = false
      // editor.config.uploadImgServer = baseURL + 'upload/ossUploads'
      // 自己实现图片上传
      editor.config.customUploadImg = (resultFiles, insertImgFn) => {
        this.updateImg(resultFiles[0], insertImgFn)
      }
      editor.create()
      editor.txt.html(this.content)
      //editor.config.colors=[]
    },
    methods: {
      onChange(newHtml) {
        this.articleHtml = newHtml
        this.$emit('changeValue', newHtml, this.field)
      },
      updateImg(image, insertImgFn) {
        if (image) {
          const file = new FormData()
          file.append('image', image)
          updateFile(file).then((res) => {
            if (res.code == 0) {
              insertImgFn(HOST + res.data[0]['path'])
            }
          })
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  #TextEditor {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    #TextEditorNav {
      width: 100%;
      height: 40px;
      background-color: yellow;
      border-bottom: 1px solid #ccc;
    }

    #TextEditorMain {
      display: flex;
      justify-content: space-around;
      // flex: 1;
      width: 100%;
      height: 400px;
      margin-top: 10px;
      margin-bottom: 10px;
      overflow: auto;
      border-top: 1px solid #ccc;
      #TextEditorMainCode,
      #TextEditorMainShow {
        //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        width: 100%;
        height: 100%;
      }
    }

    .toolbar {
      border: 1px solid #ccc;
    }

    .text {
      min-height: 400px;
      border: 1px solid #ccc;
    }
  }
</style>
